<template>
	<view class="content" :style="{'background':pageBg}" style="float: left;width: 100%;min-height: 100%;">
		
		<view style="padding: 50rpx 30rpx 0rpx 30rpx;">
			<u-search height="90" v-model="searchValue" @custom="search" @clear="clearSearch" @change="changeSearch" :clearabled="true" shape="round" :animation="true" ></u-search>
		</view>
		
		<view class="nav " style="position: relative;" >
			<scroll-view class="tab-scroll" style="width: 90%;float: left;" scroll-x="true" scroll-with-animation>
				<view class="tab-scroll_box"  >
					<view class="tab-scroll_item " :style="isActive==0?'background-color: #5A9CFA;color:white;':''"
						@click="chenked(0,-1)">
						全部
					</view>
					<view :style="isActive==(index+1)?'background-color: #5A9CFA;color:white;':''"
						class="tab-scroll_item " v-for=" (item,index) in category" :key="index"
						@click="chenked(item.id,index)">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
			<view class="tab-scroll_item" style="background-color: #5A9CFA;color:white;position: absolute;right: 5px;top:20px" @click="addClass()">
				+
			</view>
		</view>


		<scroll-view scroll-y style="height: 100%;">
			<view class="top_box">
				<view v-if="itemList.length>0">
					<HM-dragSorts-habit ref="dragSorts" :list="itemList" :autoScroll="true" :feedbackGenerator="true"
						:listHeight="fullHeight" :rowHeight="77" @change="changeList" @confirm="confirm"
						@onclick="onclick"></HM-dragSorts-habit>
				</view>
				<view v-else>
					<view class="empty__item" style="padding-top: 30vh;">
						<tn-empty icon="/static/images/empty.png" text="到达胜利之前,无法回头"></tn-empty>
					</view>
				</view>
			</view>
		</scroll-view>



		<mypopup title="" :mask="false" v-model="show_popup_check_bottom" height="230rpx" :showHeader="false"
			style="position: relative;" class="css-theme" :class="[cueTheme]">
			<view
				style="width: 60px;height: 10rpx;background-color: #ccc;position: absolute; top:5px;margin-left: 320rpx;border-radius: 20px;">
			</view>
			<view class="nav-list-popup " style="padding: 80rpx 100rpx 40rpx 100rpx;">

				<block>
					<view @click="goAdd()"
						class="nav-list-item tn-shadow-blur tn-cool-bg-image tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-between">
						<view class="tn-icon-write icon-order">
						</view>
						<view class="nav-link">
							<view class='title'>编辑</view>
						</view>
					</view>
				</block>
				<block>
					<view @click="goDel()"
						class="nav-list-item tn-shadow-blur tn-cool-bg-image tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-between">
						<view class="tn-icon-delete icon-order">
						</view>
						<view class="nav-link">
							<view class='title'>删除</view>
						</view>
					</view>
				</block>
			</view>

		</mypopup>
		<tn-modal v-model="modal_show" @click="delModalClick"></tn-modal>
	</view>
</template>
<script>
	var _self;
	import icons from '@/common/icon.js'
	import mypopup from '@/components/hqs-popup/hqs-popup.vue'
	import syscalendar from '@/common/sysCalender.js';
	import dayjs from '@/dayjs.min.js'
	import dragSorts from '@/uni_modules/HM-dragSorts-habit/components/HM-dragSorts-habit/HM-dragSorts-habit.vue'
	export default {
		components: {
			mypopup,
			dragSorts
		},
		watch: {
			currentindex(newval) {
				this.isActive = newval;
				this.scrollLeft = 0;
				for (let i = 0; i < newval - 1; i++) {
					this.scrollLeft += this.category[i].width
				};
				this.getList()
			},
			show_popup_check_bottom: {
				handler(newCheck, oldCheck) {
					if (newCheck == false) {
						this.itemCheck = {}
					}
				}
			}
		},
		data() {
			return {
				globalUrl: getApp().globalData.url,
				show_popup_check_bottom: false,
				modal_show: false,
				itemCheck: {},
				iconList: [],
				isActive: 0,
				index: 0,
				currentindex: 0,
				contentScrollW: 0, // 导航区宽度
				scrollLeft: 0, // 横向滚动条位置
				fullHeight: "",
				itemList: [],
				user: [],
				iconCategory: icons.iconCategory,
				category: [],
				searchValue: '',
			}
		},
		mounted() {
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.fullHeight = "height:" + res.windowHeight + "px";
				}
			});

		},
		onLoad(options) {
			_self = this;
		},
		onShow() {
			uni.getStorage({
				key: 'user',
				success: function(res) {
					if (res.data) {
						_self.user = res.data
						_self.getClass()
						_self.getList()
					}
				},
				fail: function(e) {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			})

		},
		methods: {
			
			changeSearch(e){
				this.searchValue = e
			},
			clearSearch(){
				this.searchValue = ""
				this.getList()
			},
			addClass() {
				uni.navigateTo({
					url: "/pages/common/listClass?type=thing"
				});
			},
			getClass() {
				var data = {
					category: 'thing',
				}
				this.$api.listTypeCommonList(data).then((res) => {
					var resData = res;
					console.log("=============listType========")
					console.log(res)
					if (resData.code == "200") {
						_self.category = resData.data;
					}
				})

			},
			onclick(e) {
				console.log('=== onclick start ===');
				console.log("被点击行: " + JSON.stringify(e.value));
				console.log("被点击下标: " + JSON.stringify(e.index));
				console.log('=== onclick end ===');
			},
			changeList(e) {
				console.log('=== change start ===');
				console.log("被拖动行: " + JSON.stringify(e.moveRow));
				console.log('原始下标：', e.index);
				console.log('移动到：', e.moveTo);
				console.log('=== change end ===');
			},
			confirm(e) {

				var list = e.list
				var data = []
				for (var i = 0; i < list.length; i++) {
					var item = {
						id: list[i].id,
					}
					data.push(item)
				}
				console.log("========================")
				console.log(data)
				this.$api.sortHabit(data).then((res) => {
					var resData = res;
					console.log(resData)
					if (resData.code == "200") {
						_self.getList()

					}
				})
			},

			checkThis(item) {
				this.show_popup_check_bottom = true;
				this.itemCheck = item
			},

			getList() {
				var data = {
					userId: _self.user.id,
					time: dayjs().format('YYYY-MM-DD')
				}
				this.$api.listSchedule(data).then((res) => {
					var resData = res;
					if (resData.code == "200") {
						console.log(resData.data)
						_self.itemList = resData.data;
					}
				})
			},

			goDetial(item) {
				console.log(item)
				uni.navigateTo({
					url: '/pages/habit/countDetail?id=' + item.id + "&userId=" + _self.user.id + "&name=" + item
						.name + "&checkedIconImage=" + item.iconUrl + "&background=" + item.background +
						"&remark=" + item.remark + "&resultDays=" + item.resultDays +
						"&repeatTime=" + item.repeatTime +
						"&warnTime=" + item.warnTime +
						"&isLog=" + item.isLog +
						"&checkedIcon=" + item.checkedIcon +
						"&type=" + item.type +
						"&event_ids=" + item.eventIds + "&status=" + item.status + "&habitLog=" + item.habitLog

				});
			},

			goAdd() {
				var item = this.itemCheck
				_self.show_popup_check_bottom = false;
				uni.navigateTo({
					url: '/pages/habit/addHabit?id=' + item.id + "&userId=" + _self.user.id + "&name=" + item
						.name + "&checkedIconImage=" + item.iconUrl + "&background=" + item.background +
						"&remark=" + item.remark + "&resultDays=" + item.resultDays +
						"&repeatTime=" + item.repeatTime +
						"&warnTime=" + item.warnTime +
						"&isLog=" + item.isLog +
						"&checkedIcon=" + item.checkedIcon +
						"&type=" + item.type +
						"&event_ids=" + item.eventIds + "&status=" + item.status
				});



			},
			goDel() {
				this.modal_show = true;
			},
			delModalClick(e) {
				this.modal_show = false;
				if (e.index == 1) {


					_self.$api.deleteHabit({}, _self.itemCheck.id).then((res) => {
						var resData = res;
						if (resData.code == "200") {
							_self.getList()
						}
					})
				}
				_self.show_popup_check_bottom = false;
			},
			// 当前点击子元素靠左留一个选项展示，子元素宽度不相同也可实现
			chenked(item, index) {
				this.isActive = (index + 1);
				_self.getList()
			},
			// swiper滑动时，获取其索引，也就是第几个
			changeSwiper(e) {
				const {
					current
				} = e.detail;
				this.currentindex = current;


			},


		}
	}
</script>
<style lang="scss">
	// page {
	// 	height: 100%;
	// 	display: flex;
	// 	background-color: #F5F6F8;
	// }
	page {
		height: 100%;
		width: 100%;
		margin: 0;
		display: flex;
		background-color: $page-bg !important;
	}

	.css-theme {
		@include text-color();
		@include base-background();
		@include border-color();
		@include shadow-color();
	}

	.uni-page-head {
		display: none;
	}

	.iconClass {
		width: 30px;
		height: 30px;
		margin-top: 10px;
	}

	.container {
		padding: 20px;
	}

	// .row {
	// 	display: flex;
	// 	flex-wrap: wrap;
	// 	justify-content: space-between;
	// 	margin: -10px;
	// }

	.category-item {
		width: 49%;
		margin-bottom: 8px;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px;
		background-color: #ffffff;
		border-radius: 8px;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.category-icon {
		width: 40px;
		height: 40px;
		margin-right: 10px;
	}

	.category-name {
		font-size: 14px;
	}

	.content {
		display: flex;
		flex-direction: column;
		width: 100%;
		flex: 1;
		background-color: $page-bg !important;

		.nav {
			// border-top: 1rpx solid #f2f2f2;
			// background-color: #ffffff;
			// position: fixed;
			z-index: 99;
			width: 100%;
			align-items: center;
			// margin-top: 20rpx;
			// height: 100rpx;
			// padding-top:30rpx ;
			padding: 40rpx 20rpx;

			.tab-scroll {
				flex: 1;
				overflow: hidden;
				box-sizing: border-box;

				// padding-left: 30rpx;
				// padding-right: 30rpx;
				.tab-scroll_box {
					display: flex;
					align-items: center;
					flex-wrap: nowrap;
					box-sizing: border-box;

					.tab-scroll_item {
						flex-shrink: 0;
						display: flex;
						justify-content: center;
						border-radius: 10px;
						padding: 5px 15px;
						font-size: 14px;
						height: 52rpx;
						line-height: 32rpx;
						font-weight: bold;
						// color: white;
					}
				}
			}
		}

		.swiper-content {
			// padding-top: 90rpx;
			flex: 1;

			.swiperitem-content {
				background-color: $page-bg;

				.nav_item {
					background-color: $page-bg;
					// padding:20rpx 40rpx 0rpx 40rpx ;
				}
			}
		}
	}
	.tab-scroll_item {
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		border-radius: 10px;
		padding: 5px 15px;
		font-size: 14px;
		height: 52rpx;
		line-height: 32rpx;
		font-weight: bold;
		// color: white;
	}
	.active {
		position: relative;
		color: #007bff !important;
		font-weight: bolder !important;
		font-size: 16px !important;
		// background-color: #ECF1F7 !important;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 130rpx;
		height: 4rpx;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}

	/* 隐藏滚动条，但依旧具备可以滚动的功能 */
	/deep/.uni-scroll-view::-webkit-scrollbar {
		display: none
	}

	// 下面的内容

	.top_box {
		float: left;
		width: 100%;
		padding-bottom: 120rpx;
		// min-height: 80vh;
	}

	.item {
		margin: 20rpx 20rpx;
		background-color: #ffffff;
		padding: 0px 10px;
		border-radius: 10px;

	}

	.field {
		display: flex;
		align-items: center;
	}

	// .row {
	// 	flex-direction: row;
	// }

	.label {
		font-weight: bold;
		margin-right: 10rpx;
	}

	.value {
		flex: 1;
		color: #ccc;
		font-size: 13px;
	}

	.copy {
		/* margin-left: 10rpx; */
		background-color: none;
		border: none;
		color: #333;
		padding: 5rpx 10rpx;
		font-size: 14px;
		margin-left: auto;
		margin-right: 1px;
	}

	.fixed-image {
		position: fixed;
		right: 20px;
		/* 可根据需要调整位置 */
		bottom: 20px;
		/* 可根据需要调整位置 */
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
	}

	.fixed-image image {
		width: 80rpx;
		height: 80rpx;
	}

	.bottom {
		display: flex;
		align-items: center;
		cursor: pointer;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}

	.bottom text {
		text-align: left;

	}

	.icon_right {
		width: 20px;
		height: 20px;
		margin-left: auto;
		margin-right: 1px;

	}

	.icon_left {
		width: 20px;
		height: 20px;
	}

	.container_box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 25rpx 10rpx;
		// border: 1px solid #f1f1f1;
		margin: 16rpx 0rpx;
	}

	.left {
		display: flex;
		align-items: center;
	}

	.image {
		width: 20px;
		height: 20px;
	}

	.text {
		margin-left: 10px;
		font-size: 16px;
		width: 300rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		-ms-text-overflow: ellipsis;
		display: -webkit-box;
		line-clamp: 1;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.text-min {
		font-size: 12px;
		color: #ccc;
	}

	.text-s {
		width: 170px;
		overflow: hidden;
		white-space: nowrap;
		/* 防止文字换行 */
		text-overflow: ellipsis;
	}

	.right {
		// display: flex;

	}

	.button_v {
		margin-left: 10px;
		background-color: none;
		border: none;
		color: #333;
		padding: 5rpx 10rpx;
		// font-size: 14px;
		float: left;
		clear: both;

	}

	.popover {
		position: absolute;
		top: 80px;
		right: 10px;
		width: 120px;
		background-color: #f0f0f0;
		border-radius: 4px;
		z-index: 999;
	}

	.option {
		padding: 12px;
		color: #333;
		font-size: 14px;
	}

	.bottom_text {
		padding-left: 10rpx;
	}

	.bottom_text_style {
		font-size: 12px;
		color: #ccc;
	}

	.u-grid-item-cls {

		width: 50px;
		height: 50px;
		border-radius: 50%;
		line-height: 50px;
		text-align: center;
		font-size: 22px;

	}


	.nav-list-popup {
		display: flex;
		/* padding: 0rpx 12rpx 0rpx; */
		justify-content: space-between;

		/* 列表元素 start */
		.nav-list-item {
			/* padding: 20rpx 30rpx; */
			border-radius: 12rpx;
			width: 45%;
			/* margin: 0 18rpx 40rpx; */
			background-size: cover;
			background-position: center;
			position: relative;
			z-index: 99;

			/* 元素标题 start */
			.nav-link {
				font-size: 14px;
				text-transform: capitalize;
				/* padding: 0 0 10rpx 0; */
				position: relative;

				.title {
					margin-top: 10rpx;
					text-align: center;
				}
			}

			/* 元素标题 end */

			/* 元素图标 start */
			.icon {
				font-variant: small-caps;
				width: 90rpx;
				height: 90rpx;
				line-height: 90rpx;
				margin: 0;
				padding: 0;
				display: inline-flex;
				text-align: center;
				justify-content: center;
				vertical-align: middle;
				font-size: 50rpx;
				color: #FFFFFF;
				white-space: nowrap;
				opacity: 0.9;
				background-color: rgba(0, 0, 0, 0.05);
				background-size: cover;
				background-position: 50%;
				border-radius: 5000rpx;
			}

			/* 元素图标 end */
		}

		/* 列表元素 end */
	}

	.icon-order {
		font-size: 20px;
	}
</style>